<template>
  <div class="drag-H5">
    <footer>
      <div class="setName">
        <h4>Drag-H5</h4>
      </div>
      <div class="setBtn">
        <el-button plain>预览</el-button>
        <el-button plain>保存</el-button>
        <el-button type="primary" class="push-btn">
          <i class="el-icon-position" /> 发布
        </el-button>
      </div>
    </footer>
    <main>
      <!-- 左侧组件 -->
      <routerIcon
        :pointer="pointer"
        @dragends="dragend"
        @closeLeft="closeLeft"
      />

      <!-- 拖动屏幕 -->
      <div class="screen" :style="`width: calc(100% - ${stretch.closeL}px - 50px - ${stretch.closeR}px)`">
        <!-- 页码，操作 -->
        <div class="page-edit">
          <div id="pageAdd" class="pageAdd">
            <el-tag
              v-for="(tag, name) in elTag.list"
              :key="name"
              :style="tag.check === true ? elTag.tagStyle : ''"
              :closable="tag.id !== 1"
              @close="handleClose(tag.id)"
              @click="tagClick(tag, elTag)"
            >
              第{{ name + 1 }}页
            </el-tag>
            <el-button
              class="button-new-tag"
              size="mini"
              @click="showInput"
              v-text="'+'"
            />
          </div>
          <div class="editRelevant">
            <p>
              <i class="iconfont icon-chexiao" />
              <span>撤销</span>
            </p>
            <p>
              <i class="iconfont icon-zhongzuo" />
              <span>重做</span>
            </p>
          </div>
        </div>
        <!-- 内容操作 画布 -->
        <div class="canvas">
          <section id="CanvasBody" class="CanvasBody">
            <!-- 主体内容 -->
            <section
              class="phone-container"
              @drop="drop($event)"
              @dragover="allowDrop($event)"
              @dragleave="dragleaves($event)"
            >
              <VueDragResize
                v-for="(item, sex) in pageComponents"
                :key="sex"
                :parent-limitation="true"
                :is-active="true"
                :w="dragResize.w"
                :h="dragResize.h"
                @resizing="resize"
                @dragging="resize"
                @activated="onActivated"
              >
                <component
                  :is="item.component"
                  :datas="item.setStyle"
                  :style="{
                    border: item.active && funTab.show ? '2px solid #155bd4' : '',
                  }"
                  class="componentsClass"
                  :data-type="item.type"
                  @click.native="activeComponent(item, sex)"
                />
              </VueDragResize>
            </section>
          </section>
          <!-- 功能模块 -->
          <transition name="el-fade-in-linear">
            <div v-show="funTab.show" class="functionTag">
              <el-tooltip
                v-for="(val, x) in functionTag"
                :key="x"
                class="item"
                effect="dark"
                :content="val.name"
                placement="left"
              >
                <p @click.stop="editFun(val, x)">
                  <i :class="'iconfont ' + val.icon" />
                </p>
              </el-tooltip>
            </div>
          </transition>
        </div>
      </div>
      <!-- 右侧工具栏 -->
      <div class="decorateAll" :style="`margin-right:${stretch.RonShow}px`">
        <template>
          <el-tabs v-model="activeName" :stretch="true">
            <el-tab-pane label="属性" name="first">
              <component
                :is="rightForm"
                :datas="currentproperties"
                @componenmanagement="componenmanagement"
              />
            </el-tab-pane>
            <el-tab-pane label="事件" name="second">配置管理</el-tab-pane>
            <el-tab-pane label="动画" name="third">角色管理</el-tab-pane>
            <el-tab-pane label="页面" name="fourth">定时任务补偿</el-tab-pane>
          </el-tabs>
        </template>
        <div class="right-close" @click="closeRight(stretch.RonShow)">
          <i :class="`el-icon-arrow-${stretch.site}`" />
        </div>
      </div>
    </main>
  </div>
</template>
<script>
import utils from '@/utils/index' // 方法
import componentProperties from '../utils/componentProperties' // 组件数据
import routerIcon from '../components/router/index' // 左侧组件大全
// 左侧组件
import assembly from '../components/assembly/index'
// 右侧组件
import assemblyConfig from '../components/assemblyConfig/index'
import VueDragResize from 'vue-drag-resize'
export default {
  name: 'DragH5',
  inject: ['reload'],
  components: {
    VueDragResize,
    routerIcon,
    ...assembly,
    ...assemblyConfig
  },
  data() {
    return {
      activeName: 'first',
      stretch: {
        closeL: 200,
        closeR: 350,
        site: 'right',
        RonShow: 0
      },
      functionTag: [
        {
          icon: 'icon-fuzhi',
          type: 'copy',
          name: '复制'
        },
        {
          icon: 'icon-shanchu',
          type: 'del',
          name: '删除'
        }
        // {
        //   icon: "icon-24gl-fontSizeIncrease",
        //   type: "font+",
        // },
        // {
        //   icon: "icon-zitisuoxiao",
        //   type: "font-",
        // },
        // {
        //   icon: "icon-B",
        //   type: "fontB",
        // },
        // {
        //   icon: "icon-tucengshangyi",
        //   type: "topIndex",
        // },
        // {
        //   icon: "icon-tucengxiayi",
        //   type: "btnIndex",
        // },
      ],
      pageComponents: [], // 页面组件数据
      pointer: { show: false }, // 数据穿透
      elTag: {
        defaultId: 1,
        tagStyle: {
          border: '1px solid #0081FE',
          color: '#0081FE'
        },
        list: [{ id: 1, check: true }]
      },
      currentproperties: {}, // 当前属性
      rightForm: '', // 右侧组件切换, 默认组件
      funTab: {
        index: null,
        show: false
      },

      // todo 暂留
      id: null // 当前页面
      // index: "", // 当前选中的index
      // pageSetup: {
      //   // 页面设置属性
      //   name: "页面标题", // 页面名称
      //   details: "", // 页面描述
      //   bgColor: "rgba(249, 249, 249, 10)", // 背景颜色
      //   bottomLogo: {
      //     isShowBootom: false,
      //     botLogo: "",
      //   }, // 底部logo
      //   isPerson: false, // 是否显示个人中心
      //   isBack: true, // 是否返回按钮
      //   titleHeight: 35,
      //   bgImg: "",
      // },
      // offsetY: 0, // 记录上一次距离父元素高度
    }
  },
  computed: {
    dragResize() {
      return {
        w: 200,
        h: 200,
        top: 0,
        left: 0
      }
    }
  },
  watch: {
    /* 监听右侧属性设置切换 */
    rightForm(newval) {
      console.log(22222, newval)
      // decorate
      // if (newval === "decorate") {
      //   utils.forEach(this.pageComponents, (res) => {
      //     /* 修改选中 */
      //     if (res.active === true) res.active = false;
      //   });
      //   // this.currentproperties = this.pageSetup;
      //   return;
      // }
      // if (newval === "componenmanagement") {
      //   /* 替换 */
      //   utils.forEach(this.pageComponents, (res) => {
      //     /* 修改选中 */
      //     if (res.active === true) res.active = false;
      //   });
      //   this.currentproperties = this.pageComponents;
      // }
    }
  },
  mounted() {
    // 页码X轴滚动条
    this.scrollX()
  },
  methods: {
    scrollX() {
      const sorltDiv = document.getElementById('pageAdd')
      sorltDiv.addEventListener('mousewheel', handler, false) // 大部分浏览器兼容性
      document.addEventListener('DOMMouseScroll', handler, false) // 火狐兼容性
      // 滚动事件的出来函数
      function handler(event) {
        // 获取滚动方向
        const detail = event.detail || event.wheelDelta
        // 定义滚动距离
        let step = 0
        // 判断滚动方向,这里的100可以改，代表滚动幅度，也就是说滚动幅度是自定义的
        if (detail < 0) {
          // 数量1为定义滚动方向为左
          step = 1 * 100
        } else {
          // 数量1为定义滚动方向为右
          step = -1 * 100
        }
        // 对需要滚动的元素进行滚动操作
        sorltDiv.scrollLeft += step
      }
    },

    // 当将元素或文本选择拖动到有效放置目标（每几百毫秒）上时，会触发此事件
    allowDrop(event) {
      // 阻止浏览器的默认事件
      event.preventDefault()
      // /* 获取鼠标高度 */
      // const eventoffset = event.offsetY;
      // /* 如果没有移动不触发事件减少损耗 */
      // if (this.offsetY === eventoffset) return;
      // else this.offsetY = eventoffset;
      // if (this.pageComponents.length) {
      //   console.log("走！", this.pageComponents);
      // } else {
      //   console.log("不走！", this.pageComponents);
      // }
    },

    // 当在有效放置目标上放置元素或选择文本时触发此事件
    async drop(event) {
      /* 获取数据 */
      const data = utils.deepClone(
        componentProperties.get(event.dataTransfer.getData('componentName'))
      )
      this.pageComponents.push(data)
      this.funTab.show = true
      /* 切换组件 */
      this.rightForm = data.style
      /* 丢样式 */
      this.currentproperties = data.setStyle
    },

    // 当拖动的元素或文本选择离开有效的放置目标时，会触发此事件
    dragleaves(even) {
      /* 删除提示组件 */
      console.log('拖拽2结束了！', even.dataTransfer.getData('componentNamxe'))
    },

    dragend(even) {
      const aaa = document.getElementsByClassName('saulTest')
      console.log('拖拽结束了！', aaa, even)
      // console.log(this.dragResize);
    },

    // 组件里面的方法
    resize() {
      // newRect
      // console.log(newRect);
      // this.dragResize.vw = newRect.width
      // this.dragResize.vh = newRect.height
      // this.dragResize.top = newRect.top
      // this.dragResize.left = newRect.left
    },

    // 切换组件位置
    componenmanagement(res) {
      this.pageComponents = res
    },

    // 选择组件
    activeComponent(res, index) {
      // const a = document.getElementsByClassName(res.component);
      // console.log("选中的组件", a);
      console.log(res, index)
      this.funTab.index = index
      // const width = a.item(0).scrollWidth
      // const height = a.item(0).scrollHeight
      // console.log('选中的组件', width, height)
      // this.dragResize.w = width
      // this.dragResize.h = height

      // this.index = index;
      /* 切换组件 */
      this.rightForm = res.style
      /* 丢样式 */
      this.currentproperties = res.setStyle
      /* 替换 */
      utils.forEach(this.pageComponents, (res) => {
        /* 修改选中 */
        if (res.active === true) res.active = false
      })

      /* 选中样式 */
      res.active = true
    },

    // 单击组件
    onActivated(item) {
      console.log('单击组件', item)
    },

    // 标题切换
    // headTop() {
    //   this.rightForm = 'decorate'
    //   /* 替换 */
    //   utils.forEach(this.pageComponents, (res) => {
    //     /* 修改选中 */
    //     if (res.active === true) res.active = false
    //   })
    // },

    /* 编辑功能组件 */
    editFun(item) {
      const data = this.pageComponents
      console.log(data)
      switch (item.type) {
        case 'copy': {
          this.$message({
            message: `${JSON.stringify(data)}`,
            center: true
          })
          break
        }
        case 'del': {
          data.length === 1 ? data.splice(0, 100) : data.splice(this.funTab.index, 1)
          break
        }
        case 'font+': {
          this.$message({
            message: '字体+功能正在加急开发中...',
            type: 'warning'
          })
          break
        }
        case 'font-': {
          this.$message({
            message: '字体-功能正在加急开发中...',
            type: 'warning'
          })
          break
        }
        case 'fontB': {
          this.$message({
            message: '粗字体功能正在加急开发中...',
            type: 'warning'
          })
          break
        }
        case 'topIndex': {
          this.$message({
            message: '上移图层功能正在加急开发中...',
            type: 'warning'
          })
          break
        }
        case 'btnIndex': {
          this.$message({
            message: '下移图层体功能正在加急开发中...',
            type: 'warning'
          })
          break
        }
      }

      // this.pageComponents.splice(index, 1)
      // if (this.index === index) this.rightForm = 'decorate'
      // if (index < this.index) this.index = this.index - 1
    },

    /* 页面刷新 */
    // reloads() {
    //   this.$confirm("重置后您添加或者修改的数据将会失效, 是否继续?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   })
    //     .then(() => {
    //       // this.$router.push({ path: "home" });
    //       this.reload();
    //     })
    //     .catch(() => {});
    // },

    // 返回上一步
    // Previous() {
    //   this.$confirm("返回列表您添加或者修改的数据将会失效, 是否继续?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   })
    //     .then(() => {
    //       this.$router.go(-1);
    //     })
    //     .catch(() => {});
    // },

    // 左侧关闭
    closeLeft(val) {
      val === 0 ? (this.stretch.closeL = 0) : (this.stretch.closeL = 200)
    },

    // 右侧关闭
    closeRight(val) {
      const r = this.stretch.RonShow
      console.log(val)
      r === 0
        ? ((this.stretch.RonShow = -350), (this.stretch.site = 'left'))
        : ((this.stretch.RonShow = 0), (this.stretch.site = 'right'))
      val === 0 ? (this.stretch.closeR = 0) : (this.stretch.closeR = 350)
    },

    // 标签页码增加
    showInput() {
      this.elTag.list.push({
        id: this.elTag.defaultId++ + 1,
        check: false
      })
    },

    // 关闭页码标签
    handleClose(val) {
      const list = this.elTag.list
      list.forEach((item) => {
        if (item.id === val) {
          list.splice(list.indexOf(item), 1)
        }
      })
    },

    // 单击页码标签
    tagClick(val, data) {
      data.list.forEach((item) => {
        item.check = item.id === val.id
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.drag-H5 {
  ::v-deep *::-webkit-scrollbar {
    width: 1px !important;
    height: 1px !important;
  }
  ::v-deep *::-webkit-scrollbar-thumb {
    background-color: #155bd4 !important;
  }
  position: absolute;
  width: 100%;
  height: 100%;
  background: #f0f2f5;
  $leftWidth: 200px;
  $rightWidth: 350px;
  $height: 64px;
  footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #001529;
    height: $height;
    position: fixed;
    width: 100%;
    z-index: 10;
    .setName {
      font-weight: 600;
      font-size: 15px;
      color: #1890ff;
      height: $height;
      width: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .setBtn {
      height: $height;
      display: flex;
      align-items: center;
      justify-content: center;
      width: $rightWidth;
      .el-button {
        color: #0082ff;
        height: 33px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .push-btn {
        color: #ffffff;
        i {
          position: relative;
          top: 1px;
        }
      }
    }
  }
  main {
    width: 100%;
    height: calc(100% - 64px);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: fixed;
    margin-top: $height;
    /* 主体 */
    .screen {
      transition: all 0.3s;
      height: 100%;
      margin: 0 auto;
      position: relative;
      $pageHeight: 60px;
      /* 页码相关 */
      .page-edit {
        height: $pageHeight;
        position: relative;
        width: 100%;
        top: 0;
        display: flex;
        align-items: end;
        justify-content: space-between;
        /* 增加页面 */
        .pageAdd {
          display: flex;
          align-items: end;
          width: 92%;
          height: $pageHeight;
          overflow: hidden;
          overflow-x: auto;
          transition: all 0.3s;
          .el-tag {
            background-color: #ffffff;
            color: #49494b;
            border: 1px solid #e7eaef;
            border-radius: 3px;
            margin-right: 10px;
            padding: 0 12px;
            cursor: pointer;
            user-select: none;
            height: 30px;
            line-height: 30px;
            transition: all 0.3s;
            ::v-deep .el-icon-close {
              top: 0;
            }
          }
          .button-new-tag {
            border: 1px dashed #c0c0c4;
            height: 30px;
            width: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
        /* 撤销重做 */
        .editRelevant {
          display: flex;
          align-items: center;
          justify-content: space-between;
          p {
            cursor: pointer;
            user-select: none;
            color: #757479;
            padding: 0 !important;
            width: 40px;
            height: 40px;
            text-align: center;
            margin: 0 auto;
            i {
              font-size: 26px;
              display: block;
            }
            span {
              font-size: 14px;
            }
          }
          p:active {
            color: #0080ff;
          }
        }
      }
      //画布
      .canvas {
        width: 100%;
        height: calc(100% - 60px);
        display: flex;
        align-items: center;
        justify-content: center;
        $marginTop: -20px;
        /* 屏幕样式 */
        .CanvasBody {
          width: calc(100% - 40px);
          height: 90%;
          background: #ffffff;
          background-size: 100%;
          box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1);
          position: relative;
          margin-top: $marginTop;
          /* 主体内容 */
          .phone-container {
            box-sizing: border-box;
            cursor: pointer;
            width: 100%;
            height: 100%;
            position: relative;
            background: url("../assets/drag.png");
            background-size: auto;
            overflow: hidden;
            .componentsClass {
              border: 1px solid #fff;
              overflow: hidden;
              position: relative;
              width: 100%;
              height: 100%;
              &:hover {
                border: 1px dashed #155bd4;
              }
            }
          }
        }
        /* 功能组件 */
        .functionTag {
          position: relative;
          width: 40px;
          height: 90%;
          text-align: center;
          background: #fff;
          font-size: 12px;
          right: 0;
          top: 0;
          transition: all 0.3s;
          box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
          margin: 0;
          margin-top: $marginTop;
          p {
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            user-select: none;
            cursor: pointer;
            padding: 0;
            margin: 0 auto;
            margin-bottom: 10px;
            i {
              color: #000000;
            }
          }
          p:active {
            transition: all 0.3s;
            i {
              color: #0080ff;
            }
          }
          p:first-child {
            margin-top: 10px;
          }
          p:last-child {
            margin-bottom: 10px;
          }
        }
      }
    }
    /* 右侧工具栏 */
    .decorateAll {
      width: $rightWidth;
      height: 100%;
      position: relative;
      background: #ffffff;
      transition: all 0.3s;
      overflow: hidden;
      ::v-deep .el-tabs__header{
        padding: 0 12px;
      }
      ::v-deep .el-tabs__content{
        position: absolute;
        width: 100%;
        height: calc(100% - 55px);
        overflow-y: auto;
        .el-tab-pane{
          padding: 0 12px;
        }
      }
      ::v-deep .el-tabs__item {
        font-size: 17px;
        font-weight: 600;
        color: #323233;
      }
      .right-close {
        position: absolute;
        width: 31px;
        top: 28%;
        left: -8%;
        z-index: 10;
        display: flex;
        align-items: center;
        font-size: 20px;
        background: url("../assets/kscj-sq-r.png") no-repeat center;
        background-size: cover;
        height: 95px;
        cursor: pointer;
        user-select: none;
        justify-content: right;
      }
    }
  }
}
</style>
